<template>
  <div class="home">
    <myheader :title="title"></myheader>
    <myinput v-model="dream"></myinput>
    <mycolors @send:color="getcolor" :col="color"></mycolors>
    <button :disabled="disabled" @click="addDream">{{ text }}</button>
    <div class="dreambox">
      <div
        class="dreamdetail"
        v-for="(item, i) in dreams"
        :key="item.id"
        :style="{ background: item.bcolor, left: item.posX, top: item.posY }"
        @touchstart="touchstart(i, $event)"
        @touchmove="touchmove"
        @touchend="touchend"
      >
        <button @click="del(i)">X</button>
        <span @click="edit(item, i)">{{ item.content }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import myinput from "@/components/myinput";
import mycolors from "@/components/mycolors";
export default {
  name: "home",
  components: {
    myheader,
    myinput,
    mycolors,
  },
  data() {
    return {
      title: "许愿墙",
      dream: "",
      text: "再想想",
      disabled: true,
      color: "",
      dreams: [],
      posX: 0,
      posY: 0,
      i: 0,
      isedit: false,
      editindex: 0,
    };
  },
  created() {
    // 获取本地存储的数据数据
    this.dreams = JSON.parse(localStorage.getItem("list")) || [];
  },
  methods: {
    addDream() {
      if (this.text == "修改") {
        this.dreams[this.editindex].content = this.dream;
        this.dreams[this.editindex].bcolor = this.color;
      } else {
        let obj = {
          content: this.dream,
          posX: Math.random() * 275 + "px",
          posY: Math.random() * 357 + "px",
          id: new Date().getTime(),
          bcolor: this.color,
        };
        this.dreams.push(obj);
        // 将数据保存到本地
        localStorage.setItem("list", JSON.stringify(this.dreams));
      }

      this.dream = "";
      this.color = "";
    },
    getcolor(color) {
      this.color = color;
    },
    // 修改
    edit(item, i) {
      console.log(item, i);
      this.dream = item.content;
      this.color = item.bcolor;
      this.isedit = true;
      this.editindex = i;
    },
    // 拖拽
    touchstart(i, e) {
      this.posX = e.touches[0].pageX - parseFloat(this.dreams[i].posX);
      this.posY = e.touches[0].pageY - parseFloat(this.dreams[i].posY);
      this.i = i;
    },
    touchmove(e) {
      let left = e.touches[0].pageX - this.posX;
      let top = e.touches[0].pageY - this.posY;

      if (left < 0) {
        left = 0;
      } else if (left > 275) {
        left = 275;
      }
      if (top < 0) {
        top = 0;
      } else if (top > 357) {
        top = 357;
      }
      this.dreams[this.i].posX = left + "px";
      this.dreams[this.i].posY = top + "px";
    },
    touchend() {
      localStorage.setItem("list", JSON.stringify(this.dreams));
    },
    // 删除
    del(i) {
      this.dreams.splice(i, 1);
      localStorage.setItem("list", JSON.stringify(this.dreams));
    },
  },
  watch: {
    dream(to) {
      if (to && this.color) {
        if (this.isedit) {
          this.text = "修改";
        } else {
          this.text = "许愿";
        }
        this.disabled = false;
      } else {
        this.disabled = true;
        this.text = "再想想";
      }
    },
    color(to) {
      if (to && this.dream) {
        if (this.isedit) {
          this.text = "修改";
        } else {
          this.text = "许愿";
        }
        this.disabled = false;
      } else {
        this.disabled = true;
        this.text = "再想想";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .myinput {
    margin-top: 10px;
  }

  button {
    width: 100px;
    height: 40px;
    background-color: rgb(105, 245, 135);
    border-radius: 6px;
    font-size: 20px;
    border: 0;
    outline: 0;
  }
  button[disabled] {
    background-color: #ccc;
  }
  .dreambox {
    width: 100%;
    height: 450px;
    position: relative;
    .dreamdetail {
      width: 100px;
      height: 100px;
      position: absolute;
      text-align: center;
      padding-top: 20px;
      button {
        width: 20px;
        height: 20px;
        background-color: #ccc;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
</style>
